<template>
	<div class="max">
		<my-header :backBtn="!checking"></my-header>
		<div class="cont-nof pr">
			<div class="weui-cells weui-cells_form tl">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">学生姓名</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入学生姓名" v-model="searchForm.studentName" @input="queryFn">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">学生编号</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入学生编号" v-model="searchForm.code" @input="queryFn">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">查询结果</label></div>
					<div class="weui-cell__bd">
						<div class="flex" style="flex-wrap: wrap;" v-if="stuInfo.name">
							<div class="info">
								姓名：{{stuInfo.name}}
							</div>
							<div class="info">
								性别：{{stuInfo.sex}}
							</div>
							<div class="info info-long">
								班级：{{stuInfo.gradeName}}{{stuInfo.clazzName}}
							</div>
						</div>
						<div class="more" v-else>
							<span v-if="searchForm.studentName!=''&&searchForm.code!=''">
								查询不到对应的学生信息
							</span>
						</div>
					</div>
				</div>
				<div class="weui-cell" v-if="addType!=='second'">
					<div class="weui-cell__hd"><label class="weui-label">家长姓名</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" placeholder="请输入您的姓名" v-model="kinsfolkForm.name">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">家长身份</label></div>
					<div class="weui-cell__bd">
						<div class="flex kinsfolkList">
							<span class="kinsfolk" v-for="item in kinsfolk" @click="selectKinsfolk(item)" :class="{'active':selection==item}">{{item}}</span>
						</div>
						<input class="weui-input kinsfolk-input" v-if="selection=='其他'" v-model="kinsfolkForm.role" type="text"
						 placeholder="请输入您的身份">
					</div>
				</div>
				<div class="weui-cell" v-if="addType!=='second'&&sexSelect.visible">
					<div class="weui-cell__hd"><label class="weui-label">家长性别</label></div>
					<div class="weui-cell__bd">
						<div class="flex sexList">
							<span class="kinsfolk" v-for="item in sexSelect.list" @click="kinsfolkForm.sex=item" :class="{'active':kinsfolkForm.sex==item}">{{item}}</span>
						</div>
					</div>
				</div>
				<div class="weui-cell" v-if="addType!=='second'">
					<div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入您的手机号码" v-model="kinsfolkForm.phone">
					</div>
				</div>
			</div>
			<div class="submitBtn">
				<a class="weui-btn weui-btn_block weui-btn_primary my-weui-btn" @click="bind">提交审核</a>
			</div>
			<div class="checkTips max" v-if="checking">
				<div class="weui-msg">
					<div class="weui-msg__icon-area"><i class="weui-icon-waiting weui-icon_msg"></i></div>
					<div class="weui-msg__text-area">
						<h2 class="weui-msg__title">绑定审核中</h2>
						<div class="weui-dialog__bd tl">
							<li>学生姓名：<span class="fr">{{parmasData.studentName}}</span></li>
							<li>所在班级：<span class="fr">{{parmasData.clazzName}}</span></li>
							<li v-if="addType!=='second'">您的姓名：<span class="fr">{{parmasData.kinsfolkName}}</span></li>
							<li>您的身份：<span class="fr">{{parmasData.role}}</span></li>
							<li v-if="addType!=='second'">手机号：<span class="fr">{{parmasData.phone}}</span></li>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="dialog1" v-if="validation">
			<div class="weui-mask"></div>
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">请确认绑定信息</strong></div>
				<div class="weui-dialog__bd tl">
					<li>学生姓名：<span class="fr">{{stuInfo.name}}</span></li>
					<li>所在班级：<span class="fr">{{stuInfo.gradeName}}{{stuInfo.clazzName}}</span></li>
					<li>性别：<span class="fr">{{stuInfo.sex}}</span></li>
					<li v-if="addType!=='second'">您的姓名：<span class="fr">{{kinsfolkForm.name}}</span></li>
					<li>您的身份：<span class="fr">{{kinsfolkForm.role}}</span></li>
					<li v-if="addType!=='second'">您的性别：<span class="fr">{{kinsfolkForm.sex}}</span></li>
					<li v-if="addType!=='second'">手机号：<span class="fr">{{kinsfolkForm.phone}}</span></li>
				</div>
				<div class="weui-dialog__ft">
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="validation = false">返回修改</a>
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="sumitFn">确定</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			let openId = this.$route.query.openId;
			let type = this.$route.query.type;
			return {
				openId: openId,
				addType: type,
				validation: false,
				kinsfolk: ['爸爸', '妈妈', '其他'],
				selection: '',
				kinsfolkForm: { //家长信息
					role: '',
					name: '',
					phone: '',
					sex: '男',
				},
				searchForm: { //搜索信息
					code: '',
					studentName: '',
				},
				stuInfo: {}, //查询到的学生信息
				checking: false,
				parmasData: {}
			}
		},
		computed: {
			sexSelect() {
				let data = {
					visible: false,
					list: ['男', '女']
				}
				if (this.selection == '其他') {
					data.visible = true;
				}
				return data
			}
		},
		methods: {
			queryFn() { //查找学生信息
				if (this.searchForm.code != '' && this.searchForm.studentName != '') {
					this.$http.fetchStuInfo(this.searchForm).then(resp => {
						if (resp.data) {
							this.stuInfo = resp.data;
						} else {
							this.stuInfo = {};
						}
					})
				} else {
					this.stuInfo = {};
				}
			},
			selectKinsfolk(item) {
				this.selection = item;
				this.kinsfolkForm.role = '';
				if (item != '其他') {
					this.kinsfolkForm.role = item;
				}
			},
			toast(text, type) {
				let _this = this;
				this.$toast.show(text, type)
				setTimeout(function() {
					_this.$toast.hide()
				}, 1000);
			},
			valiFn() {
				//验证学生信息查询
				for (let i in this.searchForm) {
					if (this.searchForm[i] == '') {
						this.toast('请填写学生姓名和学生编号', 'forbidden');
						return false
					}
				};

				//验证是否有该学生
				if (JSON.stringify(this.stuInfo) == '{}') {
					this.toast('查询不到对应的学生信息', 'forbidden');
					return false
				};

				//验证家长信息填写
				if (this.addType === 'second') {
					return true;
				}
				if (this.kinsfolkForm.role == '妈妈') {
					this.kinsfolkForm.sex = '女'
				}
				for (let i in this.kinsfolkForm) {
					if (this.kinsfolkForm[i] == '') {
						this.toast('请将家长信息填写完整', 'forbidden');
						return false
					};
					if (!(/^1[3456789]\d{9}$/.test(this.kinsfolkForm.phone))) {
						this.toast('输入的手机号码有误，请重新输入', 'forbidden');
						return false
					}
				}
				return true
			},
			bind() {
				let r = this.valiFn();
				if (r) {
					this.validation = true;
				}
			},
			sumitFn() {
				this.$toast.show('审核提交中', 'loading')
				this.parmasData = {
					clazzId: this.stuInfo.clazzId,
					clazzName: this.stuInfo.clazzName,
					kinsfolkName: this.kinsfolkForm.name,
					openId: this.openId,
					phone: this.kinsfolkForm.phone,
					role: this.kinsfolkForm.role,
					studentId: this.stuInfo.id,
					studentName: this.stuInfo.name,
					sex: this.kinsfolkForm.sex,
				};
				if (this.addType === 'second') {
					this.$http.bindSecondChild(this.parmasData).then(resp => {
						this.$toast.hide();
						this.validation = false;
						this.checking = true;
					})
				} else {
					//提交数据
					this.$http.bindStu(this.parmasData).then(resp => {
						this.$toast.hide();
						this.validation = false;
						this.checking = true;
					})
				}
			}
		},
		created() {
			this.$http.bindState({
				openId: this.openId
			}).then(resp => {
				if (resp.data[0] && resp.data[0].status == 0) {
					this.checking = true;
					this.parmasData = resp.data[0];
				}
			})
		}
	}
</script>

<style scoped>
	.info {
		width: 50%;
		margin: 1rem 0;
	}

	.info-long {
		width: 100%;
	}

	.submitBtn {
		width: 96%;
		margin: 2rem auto;
	}

	.kinsfolkList {
		justify-content: space-between;
	}

	.kinsfolk {
		padding: 0.1rem 0.5rem;
		border-radius: 5px;
	}

	.kinsfolk.active {
		color: #fff;
		background: #2aa7e1;
	}

	.sexList {
		justify-content: flex-start;
	}

	.sexList .kinsfolk {
		margin-right: 5rem;
	}

	.kinsfolk-input {
		margin-top: 2rem;
	}

	.checkTips {
		position: absolute;
		top: 0;
		left: 0;
		background: cadetblue;
		z-index: 999;
	}
</style>
